<div class="field-group box">
	<label for="X-outer-frame">Geometria della zona</label>
	<div class="field">
	
		<div id="X-outer-frame" class="outer-frame">
			<div id="X-top-frame" class="top-frame">
				<div id="X-top-legend" class="top-legend">
					<input id="X-wall-north-1" type="radio" name="wall_north_status" value="adiabatic" checked="checked" /> <label for="X-wall-north-1">Adiabatica</label>
					<br />
					<input id="X-wall-north-2" type="radio" name="wall_north_status" value="external" /> <label for="X-wall-north-2">Esterno</label>
					<br />
					<input id="X-wall-north-3" type="radio" name="wall_north_status" value="terrain" /> <label for="X-wall-north-3">Terreno</label>
					<br />
					<input id="X-wall-north-4" type="radio" name="wall_north_status" value="windowed" /> 
					<label for="X-wall-north-4">
						<a href="javascript:;" onclick="if ($('#door_north').is(':visible')) $.scrollTo($('#door_north').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Porte</a> /
						<a href="javascript:;" onclick="if ($('#window_north').is(':visible')) $.scrollTo($('#window_north').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Finestre</a>
					</label>
				</div>
			</div>
			<div id="X-mid-frame" class="mid-frame">
				<div id="X-left-frame" class="left-frame">
					<div id="X-left-legend" class="left-legend">
						<label for="X-wall-west-1">Adiabatica</label> <input id="X-wall-west-1" type="radio" name="wall_west_status" value="adiabatic" checked="checked" />
						<br />
						<label for="X-wall-west-2">Esterno</label> <input id="X-wall-west-2" type="radio" name="wall_west_status" value="external" />
						<br />
						<label for="X-wall-west-3">Terreno</label> <input id="X-wall-west-3" type="radio" name="wall_west_status" value="terrain" />
						<br />
						<input id="X-wall-west-4" type="radio" name="wall_west_status" value="windowed" /> 
						<label for="X-wall-west-4">
							<a href="javascript:;" onclick="if ($('#door_west').is(':visible')) $.scrollTo($('#door_west').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Porte</a> /
							<a href="javascript:;" onclick="if ($('#window_west').is(':visible')) $.scrollTo($('#window_west').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Finestre</a>
						</label>						
					</div>
				</div>
				<div id="X-inner-frame" class="inner-frame">
				</div>
				<div id="X-right-frame" class="right-frame">
					<div id="X-right-legend" class="right-legend">
						<input id="X-wall-east-1" type="radio" name="wall_east_status" value="adiabatic" checked="checked" /> <label for="X-wall-east-1">Adiabatica</label>
						<br />
						<input id="X-wall-east-2" type="radio" name="wall_east_status" value="external" /> <label for="X-wall-east-2">Esterno</label>
						<br />
						<input id="X-wall-east-3" type="radio" name="wall_east_status" value="terrain" /> <label for="X-wall-east-3">Terreno</label>
						<br />
						<input id="X-wall-east-4" type="radio" name="wall_east_status" value="windowed" /> 
						<label for="X-wall-east-4">
							<a href="javascript:;" onclick="if ($('#door_east').is(':visible')) $.scrollTo($('#door_east').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Porte</a> /
							<a href="javascript:;" onclick="if ($('#window_east').is(':visible')) $.scrollTo($('#window_east').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Finestre</a>
						</label>						
					</div>
				</div>
			</div>
			<div id="X-bottom-frame" class="bottom-frame">
				<div id="X-bottom-legend" class="bottom-legend">
					<input id="X-wall-south-1" type="radio" name="wall_south_status" value="adiabatic" checked="checked" /> <label for="X-wall-south-1">Adiabatica</label>
					<br />
					<input id="X-wall-south-2" type="radio" name="wall_south_status" value="external" /> <label for="X-wall-south-2">Esterno</label>
					<br />
					<input id="X-wall-south-3" type="radio" name="wall_south_status" value="terrain" /> <label for="X-wall-south-3">Terreno</label>
					<br />
					<input id="X-wall-south-4" type="radio" name="wall_south_status" value="windowed" /> 
					<label for="X-wall-south-4">
						<a href="javascript:;" onclick="if ($('#door_south').is(':visible')) $.scrollTo($('#door_south').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Porte</a> /
						<a href="javascript:;" onclick="if ($('#window_south').is(':visible')) $.scrollTo($('#window_south').parents('.field-group'), 1000, { offset: -20, easing: 'swing' });">Finestre</a>
					</label>						
				</div>
			</div>
		</div>
		
	</div>
</div>

<style type="text/css">

div#X-top-legend label, 
div#X-right-legend label,
div#X-bottom-legend label,
div#X-left-legend label {
	display: inline-block;
}

.mid-frame {
	overflow: auto;
}

.left-frame {
	float: left;
	width: 147px;
}
.inner-frame {
	float: left;
	width: 142px;
	height: 129px;
	border: 2px solid darkgreen;
}
.right-frame {
	float: right;
	width: 147px;
}


.top-legend, .bottom-legend {
	text-align: left;
	padding-left: 180px;
	text-decoration: none!important;
}

.left-legend, .right-legend {
	padding-top: 23px;
	text-decoration: none!important;
}
.top-legend {
	padding-bottom: 6px;
}

.bottom-legend {
	padding-top: 6px;
}

.left-legend {
	text-align: right;
	padding-right: 10px;
}

.right-legend {
	text-align: left;
	padding-left: 10px;
}
</style>